:<template>
    <el-table :data="tableData" :height="height" class="body">
      <el-table-column label="ID" width="50">
        <template #default="scope">
          <div style="display: flex; align-items: center;font-size: 25px;">
            <i-bi-pause-circle v-if="playThisIndex===scope.row.id" @click="playSong(scope.row)"/>
            <i-bi-skip-end-circle v-else @click="playSong(scope.row)"/>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="picUrl" label="标题">
        <template #default="scope">
          <div style="display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
            <div style="flex-basis: 40px;">
              <el-avatar style="width: 40px; height: 40px;" :src="scope.row.albumPic" shape="square" fit="fill" />
            </div>
            <div style="margin-left: 10px; display: flex;flex-grow: 1; flex-direction: column;">
              <span class="inline-singer">{{ scope.row.name }} <span v-if="scope.row.alia">{{scope.row.alia}}</span> </span>
              <span class="inline-singer">
                 <span class="vip" v-if="scope.row.fee === 1">vip</span>
                 <span class="vip" v-if="scope.row.fee === 4">无版权</span>
                 <span v-for="(singer, index) in scope.row.singer" :key="singer.id" @click.stop="toTSinger(singer.id)">
                    {{ singer.name }}
                    <span v-if="index < scope.row.singer.length - 1"> / </span>
                 </span>
              </span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="album" label="专辑" width="230" />
      <el-table-column prop="duration" label="时长" width="80" :formatter="durationFormat">
      </el-table-column>
    </el-table>
</template>
<script setup lang="ts">
import { computed } from "vue";
import {usePlayStore} from '@/store/PlayStore'
import util from '@/tools/util'
import emitter from '@/store/emitter'

const playstore = usePlayStore()
defineProps(['tableData','height'])
let playThisIndex =computed(()=>{
  if (playstore.isPlayed){
    return playstore.playList[playstore.playIndex]?playstore.playList[playstore.playIndex].id:0
  }else{
    return 0
  }
})

function durationFormat(row){
  return util.formatSongTime(row.duration)
}
function playSong(song){
  if (song.fee === 1 || song.fee === 4){
    return
  }
  if (playstore.isPlayed) {
    emitter.emit('playAudioType', 'play')
  }else{
    playstore.selectPlay([song])
  }
}
function toTSinger(id){
  console.log("查询歌手",id)
}
</script>
<style scoped lang="scss">
.body{
  width: 100%;
}
:deep(.el-table__inner-wrapper) {
  --el-table-tr-bg-color: transparentize;
  --el-table-header-bg-color: transparentize;
  tr {
    border-radius: 8px;
    .el-table__row{
      border-radius: 10px;
      cursor: pointer;
    }
  }
  .el-table__body-wrapper .el-table__body tr:hover td {
    background-color: var(--transparent-1);
  }
}
.inline-singer{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  .vip{
    color: var(--el-color-error);
    padding: 0 4px 2px 4px;
    border-radius: 5px;
    margin-right: 10px;
    border: inset 1px var(--el-color-error);
  }
}
</style>
